<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>开会倒计时</title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				position: relative;
				background: #EEEEEE;
				font-size: 10px;
				overflow: hidden;
			}
			.show-time-wrap {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: rgb(85, 85, 85);
				white-space: nowrap;
				font: 700 28rem "Microsoft YaHei";
			}
			.top-tip {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
				text-align: center;
				font-size: 50px;
				color: #f40;
			}
			.bottom-tip {
				position: absolute;
				left: 50%;
				bottom: 5rem;
				transform: translateX(-50%);
				font-size: 1.3rem;
				color: #999;
			}
		</style>
	</head>

	<body>
		<div class="show-time-wrap">
			<div class="top-tip" style="display: none;">超 时</div>
			<div id="show-time"></div>
		</div>
		<div class="bottom-tip">按空格键可暂停/继续倒计时</div>
	</body>

</html>
<script type="text/javascript">
	var showTimeBox = document.querySelector("#show-time");
	var topTip = document.querySelector(".top-tip");
	var totalTime = decodeURI(location.search);
	var clientWidth = document.body.clientWidth;
	var html = document.getElementsByTagName("html")[0].style.fontSize = clientWidth / 1280 * 10 + "px";

	if(totalTime.indexOf("totalTime") != -1) {
		totalTime = totalTime.match(/\d+/);
		console.log(totalTime)
		var minutes = parseInt(totalTime);
		var seconds = minutes * 60;
		console.log('seconds: ', seconds);
		var m = 0,
			s = 0,
			showTime = handleNumber(minutes) + " : 00";
		showTimeBox.innerHTML = showTime;
		var timer = setInterval(timeHandle, 1000);
	}

	var isPause = false;
	var isTimeOut = false;

	document.onkeydown = function(e) {
		console.log(e.keyCode);
		e = e || window.event;
		if((e.keyCode || e.which) == 32) {
			if(isPause) {
				if(isTimeOut) {
					topTip.style.display = "block";
					showTimeBox.style.color = "#f40";
					console.log(topTip, showTimeBox);

					timer = setInterval(timeOutHandle, 1000);
				} else {
					timer = setInterval(timeHandle, 1000);
				}
				isPause = !isPause;
			} else {
				clearInterval(timer);
				isPause = !isPause;
			}

		}
	}

	function timeHandle() {
		seconds--;
		m = Math.floor(seconds / 60);
		s = seconds % 60;

		if(seconds <= 0) {
			seconds = 0;
			isTimeOut = true;
			clearInterval(timer);
			timer = setInterval(timeOutHandle, 1000)
			topTip.style.display = "block";
			showTimeBox.style.color = "#f40";
		}

		showTime = handleNumber(m) + " : " + handleNumber(s);
		showTimeBox.innerHTML = showTime;
	}

	function timeOutHandle() {
		seconds++;
		m = Math.floor(seconds / 60);
		s = seconds % 60;
		showTime = handleNumber(m) + " : " + handleNumber(s);
		showTimeBox.innerHTML = showTime;
	}

	function handleNumber(t) {
		return t < 10 ? "0" + t : t;
	}
</script>